<template>
	<view class="home-wrap">
		<TabNavigation title="大代表工作视窗" :currentTab="tabKey" @tabChange="tabClick" />
		<view class="home-content">

			<cardbox style="width: 100%;" type='4' header="越秀区信息概览">
				<view slot="main" class="content-card-main0"> 
					<view class="main0-box">
						<view class="header">
							<view class="title">
								<image src="/static/name_icon.png" mode=""></image>
								<text>联络站数量</text>
							</view>
							<view class="header-right1">
								<image src="/static/zxllz.png" class="img" mode=""></image>
								<text>6 个</text>
							</view>
						</view>
						<view class="main0-dj">
							<view class="main0-dj-item">
								<image src="/static/ren-mian-bg1.png" class="bg" mode=""></image>
								<view class="name">
									片区联络站
								</view>
								<view class="num">
									14 <text class="unit">个</text>
								</view>
							</view>
							<view class="main0-dj-item">
								<image src="/static/ren-mian-bg2.png" class="bg" mode=""></image>
								<view class="name">
									其中：优秀联络站
								</view>
								<view class="num">
									4 <text class="unit">个</text>
								</view>
							</view>
						</view>
						<cTable :headerData="headerData0" :tableData="tableData0">
							<template v-slot:unitName="{data}">
								<view class="font unitName">
									{{data.unitName}}
								</view>
							</template>
							<template v-slot:controls="{data}">
								<view class="font controls" @click="lookView">
									{{data.controls}}
								</view>
							</template>
						</cTable>
						<view class="fgx-heng">

						</view>
						<view class="main0-box-bottom">
							<view class="header">
								<view class="title">
									<image src="/static/name_icon.png" class='img' mode=""></image>
									<text>联络站数量</text>
								</view>
							</view>
							<view class="main0-box-bottom-con">
								<view class="item-box">
									<image src="/static/wjdb-img1.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											全国代表
										</view>
										<view class="num">
											1<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img2.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											省代表
										</view>
										<view class="num">
											46<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img1.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											市代表
										</view>
										<view class="num">
											46<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img3.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											区代表
										</view>
										<view class="num">
											1<text>人</text>
										</view>
									</view>
								</view>
								<view class="item-box">
									<image src="/static/wjdb-img4.png" class='img' mode=""></image>
									<view class='text-box'>
										<view class="name">
											镇代表
										</view>
										<view class="num">
											11<text>人</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</view>
			</cardbox>


			<cardbox style="width: 100%;" type='12' header="代表分布">
				<view slot="main" class="content-card-main">
					<view class="header">
						<view class="title">
							<image src="/static/name_icon.png" mode=""></image>
							<text>全区总览</text>
						</view>
						<view class="header-right">
							<image src="/static/zsdb.png" class="img" mode=""></image>
							<text>565</text>
						</view>
					</view>
					<view class="jinzita-box">
						<image src="/static/jinzita.png" mode=""></image>
						<view class="jinzita-text">
							<view class="text text1">
								<view class="name">
									全国
								</view>
								<view class="num">
									3 <text>人</text>
								</view>
							</view>
							<view class="text text2">
								<view class="name">
									省
								</view>
								<view class="num">
									20 <text>人</text>
								</view>

							</view>
							<view class="text text3">
								<view class="name">
									市
								</view>
								<view class="num">
									80 <text>人</text>
								</view>

							</view>
							<view class="text text4">
								<view class="name">
									区
								</view>
								<view class="num">
									452 <text>人</text>
								</view>

							</view>
							<view class="text text5">
								<view class="name">
									区
								</view>
								<view class="num">
									678 <text>人</text>
								</view>

							</view>

						</view>
					</view>

				</view>
			</cardbox>
			<cardbox style="width: 100%;" type='12' header="本年度区本级议案建议总览">
				<view slot="main" class="content-card-main2">
					<view class="main2-top">
						<view class="main2-top-item">
							<image src="/static/rddb-icon1.png" alt="" />
							<view class="name">
								代表议案数
							</view>
							<view class="num">
								3 <text>件</text>
							</view>
						</view>
						<view class="main2-top-item">
							<image src="/static/rddb-icon1.png" alt="" />
							<view class="name">
								代表建议数
							</view>
							<view class="num">
								701 <text>件</text>
							</view>
						</view>
						<view class="main2-top-item">
							<image src="/static/rddb-icon1.png" alt="" />
							<view class="name">
								供参考数
							</view>
							<view class="num">
								403 <text>件</text>
							</view>
						</view>
					</view>

					<view class="main2-con border-b">
						<view class="main2-con-item">
							<image src="/static/rddb-icon2.png" alt="" />
							<view class="item-text">
								<view class="name">
									大会期间
								</view>
								<view class="num">
									501 <text>件</text>
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main2-con-item">
							<image src="/static/rddb-icon3.png" class='img3' alt="" />
							<view class="item-text">
								<view class="name name1">
									60%
								</view>
								<view class="num">
									<text>满意率</text>
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main2-con-item">
							<image src="/static/rddb-icon4.png" class='img3' alt="" />
							<view class="item-text">
								<view class="name name1">
									60%
								</view>
								<view class="num">
									<text>答复率</text>
								</view>
							</view>
						</view>
					</view>
					<view class="main2-con">
						<view class="main2-con-item">
							<image src="/static/rddb-icon2.png" alt="" />
							<view class="item-text">
								<view class="name">
									大会期间
								</view>
								<view class="num">
									501 <text>件</text>
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main2-con-item">
							<image src="/static/rddb-icon3.png" class='img3' alt="" />
							<view class="item-text">
								<view class="name name1">
									60%
								</view>
								<view class="num">
									<text>满意率</text>
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main2-con-item">
							<image src="/static/rddb-icon4.png" class='img3' alt="" />
							<view class="item-text">
								<view class="name name1">
									60%
								</view>
								<view class="num">
									<text>答复率</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</cardbox>

			<cardbox style="width: 100%;" type='12' header="本年度区本级人事任免情况总览">
				<view slot="main" class="content-card-main3">
					<view class="main3-top">
						<image src="/static/rddb-bg1.png" mode=""></image>
						<view class="text-box mian">
							<view class="name">
								免职人数
							</view>
							<view class="num">
								64 <text>人</text>
							</view>
						</view>
						<view class="text-box ren">
							<view class="name">
								任职人数
							</view>
							<view class="num">
								64 <text>人</text>
							</view>
						</view>
					</view>
					<view class="main3-con">
						<view class="renmian-item" v-for="(item,index) in renmianList" :key="index">
							<view :class="{'title': true, 'title1': index === 0}">
								{{item.name}}
							</view>
							<image :src="`/static/ren-mian-${item.bg}.png`" class="renmian-bg" mode=""></image>
							<view class="item-con">
								<image :src="`/static/ren-mian-${item.icon}.png`" class="renmian-icon" mode=""></image>
								<view class="text-box">
									<view class="text-item">
										<view class="name">
											<image src="/static/renmian-zi-bg.png" mode=""></image>
											任
										</view>
										<view class="num">
											{{item.count1}}
										</view>
										<view class="unit">
											人
										</view>
									</view>
									<view class="text-item">
										<view class="name">
											<image src="/static/renmian-zi-bg.png" mode=""></image>
											免
										</view>
										<view class="num">
											{{item.count1}}
										</view>
										<view class="unit">
											人
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</cardbox>

			<cardbox style="width: 100%;" header="联络站统计">
				<view slot="main" class="content-card-main4">
					<view class="main4-top">
						<view class="main4-top-left">
							<image src="/static/main4-icon.png" mode=""></image> 共计
						</view>
						<view class="main4-top-right">
							648 <text>个</text>
						</view>
					</view>
					<cTable :headerData="headerData" :tableData="tableData">
						<template v-slot:unitName="{data}">
							<view class="font unitName">
								{{data.unitName}}
							</view>
						</template>
						<template v-slot:controls="{data}">
							<view class="font controls" @click="lookView">
								{{data.controls}}
							</view>
						</template>
					</cTable>
					<view class="zhankai">
						展开<uni-icons type="down" size="16" color="#2A8BFD"></uni-icons>
					</view>
				</view>
			</cardbox>

			<cardbox style="width: 100%;" header="民意搜集情况统计">
				<view slot="main" class="content-card-main5">
					<view class="main5-top">
						<view class="main5-top-item">
							<image src="/static/main5-icon1.png" class="img" mode=""></image>
							<view class="main-top-text">
								<view class="name">
									意见数
								</view>
								<view class="num">
									1,648
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main5-top-item">
							<image src="/static/main5-icon2.png" class="img" mode=""></image>
							<view class="main-top-text">
								<view class="name">
									办结率
								</view>
								<view class="num">
									86.8%
								</view>
							</view>
						</view>
						<view class="fengexian">

						</view>
						<view class="main5-top-item">
							<image src="/static/main5-icon3.png" class="img" mode=""></image>
							<view class="main-top-text">
								<view class="name">
									满意率
								</view>
								<view class="num">
									92.6%
								</view>
							</view>
						</view>
					</view>
					<BarChart />
				</view>
			</cardbox>

			<cardbox style="width: 100%;" type='12' header="本年度代表履职情况总览">
				<view slot="main" class="content-card-main6"> 
					<view class="main6-box">
						<view class="header">
							<view class="title">
								<image src="/static/name_icon.png" mode=""></image>
								<text>主要履职活动类型及分布情况</text>
							</view>
						</view>
						<view class="main6-top">
							<view class="main6-top-item">
								<image src="/static/main6-bg1.png" class="bg" mode=""></image>
								<view class="text-box">
									<view class="name">
										履职活动总数 (次)
									</view>
									<view class="num">
										9,205
									</view>
								</view>
							</view>
							<view class="main6-top-item">
								<image src="/static/main6-bg2.png" class="bg" mode=""></image>
								<view class="text-box">
									<view class="name">
										履职活动总数 (次)
									</view>
									<view class="num">
										9,205
									</view>
								</view>
							</view>
						</view>
						<view class="progress-box">
							<view class="progress-item">
								<view class="progress-title">
									大会期间会议活动情况
								</view>
								<view class="bar-box">
									<view class="bar" style="width: 80%;">

									</view>
									<view class="bar-num">
										377人/次
									</view>
								</view>
							</view>
							<view class="progress-item">
								<view class="progress-title">
									参加进社区活动情况
								</view>
								<view class="bar-box">
									<view class="bar" style="width: 60%;">

									</view>
									<view class="bar-num">
										377人/次
									</view>
								</view>
							</view>
							<view class="progress-item">
								<view class="progress-title">
									<text>大会期间会议活动情况</text>
									<view class="sun-title">
										进入特色专题<uni-icons type="right" size="12" color="#2A8BFD"></uni-icons>
									</view>
								</view>
								<view class="bar-box">
									<view class="bar" style="width: 50%;">

									</view>
									<view class="bar-num">
										377人/次
									</view>
								</view>
							</view>
							<view class="zhankai">
								展开<uni-icons type="down" size="16" color="#2A8BFD"></uni-icons>
							</view>
						</view>
					</view>


				</view>
			</cardbox>

			<cardbox style="width: 100%;" type='12' header="本年度代表履职情况总览">
				<view slot="main" class="content-card-main7">
					<view class="main7-box">
						<view class="main7-item">
							<image src="/static/main4-icon.png" class='img' mode=""></image>
							<view class="name">
								组织培训次数
							</view>
							<view class="num">
								46
							</view>
							<view class="unit">
								次
							</view>
						</view>
						<view class="main7-item">
							<image src="/static/main4-icon.png" class='img' mode=""></image>
							<view class="name">
								参与培训人数
							</view>
							<view class="num">
								1,879
							</view>
							<view class="unit">
								人
							</view>
						</view>

					</view>
				</view>
			</cardbox>


		</view>
	</view>
</template>

<script>
	import TabNavigation from '@/components/TabNavigation.vue';
	import cardbox from '@/components/card/cardbox.vue'
	import cTable from '@/components/cTable/cTable.vue'
	import BarChart from './charts/bar-chart.vue'

	export default {
		components: {
			TabNavigation,
			cardbox,
			cTable,
			BarChart
		},
		data() {
			return {
				tabKey: 0,
				renmianList: [{
					name: '市人大及其常委',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon1'
				}, {
					name: '市人民政府',
					count1: 24,
					count2: 24,
					bg: 'bg2',
					icon: 'icon2'
				}, {
					name: '市监察委员会',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon3'
				}, {
					name: '市中级人民法院',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon3'
				}, {
					name: '市人民检察院',
					count1: 24,
					count2: 24,
					bg: 'bg2',
					icon: 'icon4'
				}, {
					name: '广州海事法院',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon4'
				}, {
					name: '广州知识产权法院',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon4'
				}, {
					name: '广州互联网法院',
					count1: 24,
					count2: 24,
					bg: 'bg1',
					icon: 'icon4'
				}, ],
				headerData: [{
						align: 'left',
						name: '区名称',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						align: 'left',
						name: '联络站数（个）',
						value: 'controls',
						solt: 'controls'
					},

				],
				tableData: [{
						unitName: '越秀区',
						controls: '76'
					},
					{
						unitName: '海珠区',
						controls: '65'
					},
					{
						unitName: '荔湾区',
						controls: '55'
					},
					{
						unitName: '天河区',
						controls: '45'
					},
				],
				headerData0: [{
						width: 30,
						align: 'left',
						name: '优秀联络站',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						width: 20,
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					},
				],
				tableData0: [{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
					{
						unitName: '广州市越秀区洪桥街道中心联络站',
						controls: '查看详情'
					},
				],
			};
		},
		methods: {
			tabClick(val) {
				this.tabKey = val;
				// 可选择跳转页面或更新内容
			}
		}
	};
</script>

<style scoped lang="scss">
	.home-wrap {
		padding-bottom: 20rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between; 

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;

				image {
					width: 90rpx;
					height: 84rpx;
					margin-left: -9rpx;
				}

				text {
					margin-top: 4rpx;
				}
			}


			.header-right {
				position: relative;
				width: 234rpx;
				height: 52rpx;

				.img {
					width: 234rpx;
					height: 52rpx;
				}

				text {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}
			}

			.header-right1 {
				position: relative;
				width: 236rpx;
				height: 52rpx;

				.img {
					width: 234rpx;
					height: 52rpx;
				}

				text {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

			}
		}

		.main0-box {
			padding: 20rpx;

			.main0-dj {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.main0-dj-item {
					width: 49%;
					height: 148rpx;
					position: relative;

					.bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7F7F7F;
						position: absolute;
						left: 32rpx;
						top: 26rpx;
					}

					.num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #000000;
						position: absolute;
						left: 32rpx;
						top: 72rpx;

						.unit {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #7F7F7F;
							padding-left: 10rpx;
						}
					}
				}

			}

			.unitName {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #000000;
				width: 330rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.controls {
				font-family: DIN-BoldItalic, DIN-BoldItalic;
				font-weight: 400;
				font-size: 24rpx;
				color: #2A8BFD;
				width: 150rpx;
			}

			.fgx-heng {
				width: 100%;
				height: 12rpx;
				border-radius: 50%;
				background-color: #F5F7F9;
				margin: 34rpx 0;

			}

			.main0-box-bottom {

				.main0-box-bottom-con {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					/* 每行 3 个元素 */
					grid-gap: 20rpx;

					/* 元素之间的间距 */
					.item-box {
						height: 148rpx;
						position: relative;

						.img {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}

						.text-box {
							padding: 26rpx 28rpx;
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;

							.name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #7F7F7F;
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 40rpx;
								color: #000000;
								padding-top: 12rpx;

								text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #7F7F7F;
								}
							}
						}
					}
				}
			}
		}

		.jinzita-box {
			margin-top: 68rpx;
			position: relative;

			image {
				width: 598rpx;
				height: 410.59rpx;
			}

			.jinzita-text {
				position: absolute;
				top: -1px;
				left: 120px;

				.text {
					display: flex;
					align-items: center;
					margin-top: 3rpx;

					.name {
						background: rgba(255, 255, 255, 0.5);
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						padding: 2rpx 4rpx;
						margin-right: 20rpx;
					}

					.num {
						display: flex;
						align-items: center;
						font-family: DIN-MediumItalic, DIN-MediumItalic;
						font-weight: 400;
						font-size: 38rpx;
						color: #F22C1F;

						text {
							margin-left: 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}
					}
				}

				.text2 {
					padding-left: 35rpx;
				}

				.text3 {
					padding-left: 60rpx;
				}

				.text4 {
					padding-left: 90rpx;
				}

				.text5 {
					padding-left: 115rpx;
				}
			}
		}

		.content-card-main2 {
			padding: 54rpx 16rpx 0;

			.main2-top {
				padding: 0 20rpx 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F5F7F9;

				.main2-top-item {
					image {
						width: 66rpx;
						height: 66rpx;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 900;
						font-size: 24rpx;
						color: #2E2E2E;
						padding: 14rpx 0 16rpx;
					}

					.num {
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 40rpx;
						color: #F22C1F;

						text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #878787;
							margin-left: 4rpx;
						}
					}
				}
			}

			.main2-con {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 48rpx 0;



				.main2-con-item {
					display: flex;
					align-items: center;

					image {
						width: 84rpx;
						height: 80rpx;
					}

					.img3 {
						width: 92.37rpx;
						height: 54rpx;
					}


					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 900;
						font-size: 24rpx;
						color: #2E2E2E;
						padding: 0rpx 0 8rpx 8rpx;
					}

					.name1 {
						font-weight: bold;
						font-size: 32rpx;
					}

					.num {
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 40rpx;
						color: #F22C1F;

						text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #878787;
							margin-left: 4rpx;
						}
					}
				}
			}

			.border-b {
				border-bottom: 2rpx solid #F5F7F9;
			}

		}

		.content-card-main3 {
			padding-bottom: 20rpx;

			.main3-top {
				width: 100%;
				position: relative;

				image {
					width: 100%;
					height: 248.22rpx;
				}

				.text-box {
					position: absolute;
					top: 55rpx;

					.name {
						font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
						font-weight: 400;
						font-size: 32rpx;
					}

					.num {
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 40rpx;

						text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							margin-left: 6rpx;
						}
					}
				}

				.mian {
					left: 75rpx;
					color: #FF4503;
				}

				.ren {
					left: 325rpx;
					color: #fff;
				}

			}

			.main3-con {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;

				.renmian-item {
					width: 49%;
					height: 148rpx;
					position: relative;
					margin: 25rpx 0;

					.renmian-bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}


					.title {
						position: absolute;
						left: 20rpx;
						top: -25rpx;
						padding: 0 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						background: linear-gradient(135deg, #DF2F2F 0%, #FF8180 100%);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						z-index: 1;
						color: #fff;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.title1 {
						background: linear-gradient(135deg, #FF0000 0%, #C70100 100%);
					}


					.item-con {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 24rpx;

						.renmian-icon {
							width: 76rpx;
							height: 76rpx;
							margin-right: 16rpx;
						}

						.text-box {
							flex: 1;

							.text-item {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.name {
									width: 92rpx;
									height: 32rpx;
									position: relative;
									text-align: center;
									line-height: 32rpx;

									image {
										position: absolute;
										left: 0;
										top: 0;
										width: 100%;
										height: 100%;

									}
								}

								.num {
									font-family: DIN-BlackItalic, DIN-BlackItalic;
									font-weight: 900;
									font-size: 32rpx;
									color: #203B70;
									margin: 0 4rpx 0 6rpx;
								}

								.unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #828282;
								}
							}
						}

					}
				}
			}
		}

		.content-card-main4 {
			padding: 0 20rpx 20rpx;

			.main4-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25rpx 0;

				.main4-top-left {
					display: flex;
					align-items: center;

					image {
						width: 106rpx;
						height: 106rpx;
						margin-right: 20rpx;
					}
				}

				.main4-top-right {
					display: flex;
					align-items: center;
					font-family: DIN-BoldItalic, DIN-BoldItalic;
					font-weight: 400;
					font-size: 60rpx;
					color: #FF8180;

					text {
						font-family: DIN-BoldItalic, DIN-BoldItalic;
						font-weight: 400;
						font-size: 30rpx;
						color: #8C8C8C;
						margin-left: 4rpx;
					}
				}
			}

			.controls {
				font-family: DIN-BoldItalic, DIN-BoldItalic;
				font-weight: 400;
				font-size: 32rpx;
				color: #F22C1F;
			}
		}

		.content-card-main5 {
			.main5-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.main5-top-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 33%;

					.img {
						width: 72rpx;
						height: 72rpx;
					}

					.main-top-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;

						.name {
							padding-bottom: 4rpx;
						}
					}
				}
			}
		}

		.content-card-main6 {
			.main6-box {
				padding: 20rpx;

				.main6-top {
					width: 100%;
					height: 178rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.main6-top-item {
						position: relative;
						width: 49%;
						height: 100%;

						.bg {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}

						.text-box {
							position: absolute;
							top: 24rpx;
							left: 18rpx;

							.name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
							}

							.num {
								font-family: DIN, DIN;
								font-weight: bold;
								font-size: 36rpx;
								color: #FFFFFF;
								padding-top: 26rpx;
							}
						}

					}
				}

				.progress-box {
					.progress-item {
						.progress-title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							font-size: 26rpx;
							color: #000000;
							padding-bottom: 10rpx;
							display: flex;
							align-items: center;

							.sun-title {
								font-family: DIN, DIN;
								font-weight: 400;
								font-size: 24rpx;
								color: #2A8BFD;
								padding-left: 6rpx;
							}


						}

						.bar-box {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.bar {
								height: 22rpx;
								background: linear-gradient(311deg, #FF1010 0%, #FFD3D3 100%);
								border-radius: 0rpx 0rpx 0rpx 0rpx;
							}

							.bar-num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #F22C1F;
								padding-left: 6rpx;
							}
						}
					}
				}
			}
		}


		.content-card-main7 {
			.main7-box {
				padding: 20rpx;

				.main7-item {
					padding: 0 98rpx 0 32rpx;
					display: flex;
					align-items: center;
					height: 160rpx;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #EEEEEE;
					margin-bottom: 30rpx;

					.img {
						width: 90rpx;
						height: 90rpx;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1E1F4B;
						padding: 0 134rpx 0 34rpx;
					}

					.num {
						font-family: DIN Alternate, DIN Alternate;
						font-weight: bold;
						font-size: 40rpx;
						color: #000000;
					}

					.unit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1E1F4B;
						padding-left: 6rpx;
					}
				}
			}
		}

		.zhankai {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #2A8BFD;
			text-align: center;
			padding: 26rpx 0;
		}

		.fengexian {
			width: 2px;
			height: 94rpx;
			background: #F5F7F9;
			margin: 0 10rpx;
		}
	}
</style>